<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <!-- 项目名称 -->
      <el-form-item label="项目名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 项目描述 -->
      <el-form-item label="项目描述（每项描述以英文逗号隔开）">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <!-- 项目链接 -->
      <el-form-item label="项目链接">
        <el-input v-model="form.url"></el-input>
      </el-form-item>
      <!-- GitHub 地址 -->
      <el-form-item label="GitHub 地址">
        <el-input v-model="form.github"></el-input>
      </el-form-item>
      <!-- 项目预览图 -->
      <el-form-item>
        <upLoad class="fontSize" title="项目预览图（点击修改）" v-model="form.thumb" />
      </el-form-item>
      <!-- 项目等级 -->
      <div style="font-size: 14px;margin-bottom:15px; font-weight: bold; color:#606266;">项目等级</div>
      <el-select v-model="form.order" placeholder="请选择项目等级">
        <el-option label="1" value="1"></el-option>
        <el-option label="2" value="2"></el-option>
        <el-option label="3" value="3"></el-option>
        <el-option label="4" value="4"></el-option>
        <el-option label="5" value="5"></el-option>
      </el-select>
      <!-- 发布项目 -->
      <el-form-item style="margin-top:20px;">
        <el-button type="primary" plain @click="pubProjectBtn_Handle">发布项目</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import upLoad from "@/components/UpLoad"
import { newProject, getProject } from "@/api/project"
export default {
  data() {
    return {
      form: {
        description: '',
        id: '',
        name: '',
        url: '',
        github: '',
        order: 1,
        thumb: ''
      },
    }
  },
  components: {
    upLoad,
  },
  computed: {

  },
  methods: {
    // 验证正则表达式
    isLeg(url) {
      let reg = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[a-zA-Z0-9-._~:/?#[\]@!$&'()*+,;=]*)?$/;
      return reg.test(url)
    },

    // 发布项目
    async pubProjectBtn_Handle() {
      console.log('发布项目【newProject API 会自动添加id，不必担心】', this.form);
      let obj = { ...this.form }
      obj.order = parseInt(obj.order)
      obj.description = obj.description.split(',')
      if (!obj.thumb) {
        console.log("thumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbthumbv");
        obj.thumb = 'https://avatars.githubusercontent.com/u/165580199?v=4'
      }

      // if (!this.isLeg(obj.url)) { //【通过url地址验证】
      //   this.$message.error('项目链接 不是有效地址！')
      // } else if (!this.isLeg(obj.github)) {
      //   this.$message.error('GitHub 链接不是有效地址！')
      // } else {
      //   await newProject(obj)
      //   this.$message.success('发布成功')
      //   this.$router.push('projectList')
      // }
      // 【优化了上面代码】
      // 先检查非空字段的有效性
      if (obj.url && !this.isLeg(obj.url)) {
        this.$message.error('项目链接 不是有效地址！')
      } else if (obj.github && !this.isLeg(obj.github)) {
        this.$message.error('GitHub 链接不是有效地址！')
      } else {
        // 所有非空字段都有效，执行提交
        await newProject(obj)
        this.$message.success('发布成功')
        this.$router.push('projectList')
      }

      // const s = await getProject()
      // console.log(s, 'sssssssssssssssssssssssssssssssssss');

    }
  },
}
</script>

<style scoped>
.fontSize {
  font-weight: bold;
  color: #606266;
}
</style>
